<template>
  <el-card>
    <div slot="header">
      <h3>集团指导加价率-单据查看</h3>
    </div>
    <div v-loading="pageLoading">
      <TextToolTip bold label="发起类型" :text-content="fieldsData.opeTypeStr" />
      <!-- 发起原因输入框 -->
      <LaunchReasonInput isDisabled :reason.sync="launchReason" />
      <el-row>
        <skus-table
          showPagination
          :showSelectCol="!isAuditPassed"
          :showActionCol="!isAuditPassed"
          :columns="TableInfo.columns"
          :dataSource="TableInfo.list"
          :pageSizes="pageSizes"
          :pagination="pagination"
          :total="pagination.total"
          :selectionChange="TableInfo.setSelection"
          :actionRender="renderTableBtnAction"
          @pageChange="handlePageChange"
          @pageSizeSelect="handlePageSizeChange"
        >
          <BtnRender slot="content_context" :render="renderBtnsBar" />
        </skus-table>
      </el-row>
      <FooterFields :fieldsItems="fieldsItems" :fieldsData="fieldsData" />
    </div>
    <ShowListDialog
      showPagination
      :visible.sync="showList.visible"
      :tableColumns="showList.columns"
      :searchList="getPreviewSalePrice"
    />
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields/DataRender';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import ShowListDialog from '@/components/ShowListDialog';
import BtnRender from '@/components/JSXRender/BtnRender';
import TextToolTip from '@/components/ShowContent/TextTooltip';
import {
  TABLE_COLUMNS,
  AUDIT_VIEW_FOOTER_FIELDS,
  AUDIT_VIEW_FAIL_FOOTER_FIELDS
} from './constants/view';
import { AUDIT_STATE_VALUES, PREVIEW_TABLE_COLUMNS } from '@/constants/markupRate';
import { TableInfo } from '@/utils/getUtils';
import { getListPageBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import skusPage from '@/mixins/commodity/skusPage';
import {
  getProductMarkupRateRecordDetailService,
  querySalePriceRecordNoService,
  previewSalePriceService
} from '@/api/basics/categoryManage/guideMarkupRateToAudit';
export default {
  mixins: [skusPage],
  components: {
    SkusTable,
    FooterFields,
    LaunchReasonInput,
    ShowListDialog,
    BtnRender,
    TextToolTip
  },
  data () {
    return {
      launchReason: '', // 发起原因
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      fieldsItems: AUDIT_VIEW_FOOTER_FIELDS,
      fieldsData: {},
      pageLoading: false,
      pageSizes: [10, 100, 1000],
      isAuditPassed: false, // 是否为审核通过单据，审核通过单据不可预览，可查看售价单据详情。其余状态可预览，不可查看售价单据详情
      priceRecordNo: '', // 查看售价单据详情单据号
      showList: {
        visible: false,
        columns: PREVIEW_TABLE_COLUMNS,
        detaulUuids: [] // 预览编码集合
      },
    }
  },
  mounted () {
    this.setPriceRecordNo()
    this.setRecordDetails()
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const batchPreviewBtn = {
        label: '批量预览',
        method: this.handleBatchPreview,
        disabled: this.TableInfo.isNullSelection()
      }
      const viewPriceBtn = { label: '查看售价单据', method: this.handleViewPriceRecord }
      const btnBars = [this.isAuditPassed ? viewPriceBtn : batchPreviewBtn]
      return getListPageBtnsBar(h, btnBars, null, 'start')
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [{ label: '预览', method: this.handlePreview }]
      return getTableAction({ h, row, actionList })
    },
    // 预览
    handlePreview (row) {
      this.showList.detailUuids = [row.uuid]
      this.showList.visible = true
    },
    // 批量预览
    handleBatchPreview () {
      this.showList.detailUuids = this.TableInfo.selection.map(item => item.uuid)
      this.showList.visible = true
    },
    // 查看售价单据
    handleViewPriceRecord () {
      const { href } = this.$router.resolve({
        name: 'editSalePriceRecordView',
        query: { recordNo: this.priceRecordNo }
      })
      window.open(href, '_blank')
    },
    // 设置查看售价单据号
    async setPriceRecordNo () {
      const data = { recordNo: this.$route.query?.recordNo }
      const loadingFn = state => { this.pageLoading = state }
      const res = await querySalePriceRecordNoService(data, loadingFn)
      this.priceRecordNo = res?.retData
    },
    // 获取预览列表详情
    async getPreviewSalePrice (paginationParams, loadingFn) {
      const data = {
        detailUuids: this.showList.detailUuids,
        recordNo: this.$route.query?.recordNo,
        ...paginationParams
      }
      const res = await previewSalePriceService(data, loadingFn)
      return res
    },
    // 获取表格数据
    getTableData () {
      this.setRecordDetails()
    },
    // 设置单据详情信息
    async setRecordDetails () {
      const { recordNo } = this.$route.query
      const data = { recordNo, ...this.paginationParams }
      const loadingFn = state => { this.pageLoading = state }
      const res = await getProductMarkupRateRecordDetailService(data, loadingFn)
      if (res?.retData) {
        const { results, totalNum } = res.retData?.commitProductMarkupRateRecordDetailVoPager ?? {}
        this.TableInfo.setList(results)
        this.setTotalNum(totalNum)
        this.setFooterFieldsDetails(res.retData)
        this.launchReason = res.retData?.launchReason
        this.isAuditPassed = res?.retData?.commitState == 'OK' // 审核通过单据不可预览
      }
    },
    // 设置表尾字段信息
    setFooterFieldsDetails (retData) {
      if (retData.commitState == AUDIT_STATE_VALUES.Fail) {
        this.fieldsItems = AUDIT_VIEW_FAIL_FOOTER_FIELDS
      }
      this.fieldsData = retData
    }
  }
}
</script>
